<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿里巴巴导航栏案例</title>
    <style>
        /*清除元素默认的内外边距*/
        *{
            margin: 0;
            padding: 0;
        }

        .bw{
            height: 41px;
            background-color: #FCFCFC;
            /* 上边框 */
            border-top: 3px solid red;
            /* 下边框 */
            border-bottom:1px solid orange;
        }

        .bw a{
            /* 转换为行内块元素 */
            display: inline-block;
            height: 41px;
            line-height: 41px;
            color: #4c4c4c;
            /*代表 上下是 0  左右是 20 内边距*/
			/* padding: 0 20px; */
            padding-left: 20px;
            padding-right: 20px;
            text-decoration: none;
            background-color: green;
            font-size:12px;
        }

        .bw a:hover{
            background-color: rgb(8, 3, 36);
        }
    
    </style>
</head>
<body>
    <div class="bw">
        <a href="#">网站首页</a>
        <a href="#">网站连接</a>
        <a href="#">Web前端链接</a>
        <a href="#">JavaEE链接</a>
        <a href="#">大数据链接</a>
        <a href="#">面试题解析</a>
    </div>
</body>
</html>